<template class="d-flex align-items-center overflow-x-auto">
    <div class="group">
        <button class="run-button btn btn-sm btn-themed me-2"
                show.bind="!isBusy"
                title="${getShortcutKeyCombo('Run')}"
                click.trigger="run()">
            <i class="run-icon"></i>
        </button>
        <button class="btn btn-danger me-2"
                show.bind="environment.status === 'Running' || environment.status === 'Stopping'"
                title="Stop"
                click.trigger="stop()"
                disabled.bind="environment.status === 'Stopping'">
            <i class="stop-icon"></i>
        </button>
        <button class="btn btn-sm btn-themed me-2"
                title="${getShortcutKeyCombo('Save')}${environment.script.isDirty ? ': there are unsaved changes' : ''}"
                click.trigger="save()"
                disabled.bind="isBusy || !environment.script.isDirty">
            <i class="save-icon ${environment.script.isDirty ? 'is-dirty' : ''}"></i>
        </button>
        <button class="btn btn-sm btn-themed"
                title="${getShortcutKeyCombo('Script Properties')}"
                click.trigger="openProperties()"
                disabled.bind="isBusy">
            <i class="properties-icon"></i>
        </button>
    </div>
    <div class="group" title="The .NET SDK to use for this script.">
        <b>SDK:</b>
        <select class="form-select form-select-sm dotnet-runtime-selector ms-3"
                value.bind="targetFrameworkVersion"
                disabled.bind="isBusy">
            <option value="" disabled></option>
            <option value.bind="framework" repeat.for="framework of availableFrameworkVersions">
                .NET ${framework.replace('DotNet', '')}
            </option>
        </select>
    </div>
    <div class="group">
        <b>Kind:</b>
        <select class="form-select form-select-sm script-kind-selector ms-3"
                value.bind="kind"
                disabled.bind="isBusy">
            <option value="Program">C# Program</option>
            <option value="SQL">SQL</option>
        </select>
    </div>
    <div class="group"
         title="Compiler optimizations (Optimize -/+)">
        <b>Optimize:</b>
        <select class="form-select form-select-sm optimization-level-selector ms-3"
                value.bind="optimizationLevel"
                disabled.bind="isBusy">
            <option model.bind="'Debug'" title="Optimize-: Optimizations disabled.">- Debug</option>
            <option model.bind="'Release'" title="Optimize+: Optimizations enabled.">+ Release</option>
        </select>
    </div>
    <div class="group">
        <b>Connection:</b>
        <select class="form-select form-select-sm data-connection-selector ms-3"
                value.bind="dataConnection"
                disabled.bind="isBusy">
            <option model.bind="null">None</option>
            <option repeat.for="connection of dataConnectionStore.connections"
                    model.bind="connection">
                ${connection.name} (${connection.type})
            </option>
        </select>
    </div>
    <div class="ms-auto me-3 text-truncate" title="Click to go to References">
        <a class="btn btn-sm ${script.config.references.length ? 'btn-secondary' : 'btn-outline-secondary'}"
           click.trigger="openProperties()">
            ${script.config.references.length} Reference${script.config.references.length == 1 ? '' : 's'}
        </a>
    </div>
</template>
